<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no" />
	<title>盲盒脱单</title>
	<meta name="keywords" content="SEO关键字">
	<meta name="description" content="SEO介绍">
	<link rel="stylesheet" type="text/css" href="/static/web/style/style.css" />
	<link rel="stylesheet" type="text/css" href="/static/web/plugins/weui.min.css" />
	<link rel="stylesheet" type="text/css" href="/static/web/plugins/Swiper/swiper.css" />
</head>
<body>

<div class="top">
	<div class="items">
		<a class="item on" href="/shop">抽放纸条</a>
		<a class="item" href="/shop/my_scrip?act=put">我的纸条</a>
	</div>
</div>
<div class="top_blank"></div>

<div class="banner">
	<div class="container">
		<div class="swiper-container">
			<div class="swiper-wrapper">
	      <div class="swiper-slide"><img class="image" src="/static/web/images/banner1.jpg"></div>
	      <div class="swiper-slide"><img class="image" src="/static/web/images/banner2.png"></div>
	    </div>
	    <div class="swiper-pagination"></div>
		</div>
	</div>
</div>

<div class="wallet">
	<div class="container items">
		<div class="item">
			<div class="item_box" onclick="showGold();">
				<i class="iconfont">&#xe64a;</i>我的金币<span>{{$user->gold}}</span>
			</div>
		</div>
		<div class="item">
			<div class="item_box">
				<i class="iconfont">&#xe782;</i>今日抽取<span>{{$today_take_scrip_count}}/{{Config('common.today_take_scrip_max_count')}}</span>
			</div>
		</div>
	</div>
</div>

<div class="databox">
	<div class="container items">
		<div class="item man">
			<div class="item_top">
				<img src=".//static/web/images/man_box.png">
			</div>
			<div class="btns">
				<div class="btn" onclick="showPutScrip('man');">放入1张男生纸条</div>
				<div class="btn" onclick="showTakeScrip('man');">抽取1张男生纸条</div>
			</div>
		</div>
		<div class="item woman">
			<div class="item_top">
				<img src=".//static/web/images/woman_box.png">
			</div>
			<div class="btns">
				<div class="btn" onclick="showPutScrip('woman');">放入1张女生纸条</div>
				<div class="btn" onclick="showTakeScrip('woman');">抽取1张女生纸条</div>
			</div>
		</div>
	</div>
</div>

<div class="foot">
	<span onclick="showArticle(1);">用户须知</span><span onclick="showArticle(2);">联系客服</span><span onclick="showArticle(3);">投诉举报</span>
</div>

<div class="popup_mask" onclick="closeMask();"></div>

<div class="popup_box popup_article">
	<div class="popup_box_top"><span></span><i class="iconfont popup_close" onclick="closeMask();"></i></div>
	<div class="popup_box_content"></div>
  <div class="popup_box_foot">
  	<button type="sumbit">我知道了</button>
  </div>
</div>

<div class="popup_box popup_take_scrip">
	<input type="hidden" id="take_scrip_sex">
	<div class="popup_box_top"><span>抽取1张男生纸条</span><i class="iconfont popup_close" onclick="closeMask();"></i></div>
	<div class="popup_box_content">
		<div class="sex_box man_box"><img src="/static/web/images/man_box.png"></div>
  </div>
  <div class="popup_box_foot">
  	<div class="price">1金币 / 次</div>
  	<button type="sumbit" onclick="takeScrip();">确认抽取</button>
  </div>
</div>

<div class="popup_box popup_put_scrip">
	<div class="popup_box_top"><span>放入纸条</span><i class="iconfont popup_close" onclick="closeMask();"></i></div>
	<div class="popup_box_content">
		<form id="form" action="/api/shop/put_scrip" method="post">
			<input type="hidden" name="sex" >
			<div class="textarea">
	      <textarea class="weui-textarea" placeholder="写出你想说的话~" rows="3" name="content"></textarea>
	    </div>
	    <div class="weui-uploader__bd">
				<ul class="weui-uploader__files" id="uploaderFiles" wah-hotarea="click"></ul>
				<div class="weui-uploader__input-box">
				  <input id="uploaderInput" class="weui-uploader__input">
				</div>
			</div>
			<div class="weui-cell weui-cell_active weixin">
			  <div class="weui-cell__hd"><span class="weui-label">微信号</span></div>
			  <div class="weui-cell__bd">
			    <input id="js_input1" class="weui-input" placeholder="填写本人微信号" name="weixin">
			  </div>
			</div>
	  </div>
	  <div class="popup_box_foot">
	  	<div class="price">1金币 / 次</div>
	  	<button type="sumbit">确认放入</button>
	  </div>
  </form>
</div>

<div class="popup_box popup_gold">
	<div class="popup_box_top"><span>我的金币</span><i class="iconfont popup_close" onclick="closeMask();"></i></div>
	<div class="popup_box_content">
		<div class="gold_icon"><i class="iconfont">&#xe64a;</i></div>
		<div class="gold_balance">现有 {{$user->gold}} 金币</div>
		<div class="gold_buy_items">
			@foreach(Config('common.gold_pay_data') as $value)
    	<div class="item">
      	<div class="item_box">
      		<div class="gold_number">{{$value['gold']}}金币</div>
	        <div class="gold_price">¥{{$value['price']}}</div>
	        <div class="gold_buy_btn" onclick="goldPay({{$value['gold']}});">购买</div>
      	</div>
      </div>
      @endforeach
 		</div>
  </div>
  <div class="gold_msg">
    <span onclick="showArticle();">如有疑问联系客服</span>
  </div>
</div>

<form action="/api/upload" method="post" id="upload_form" enctype="multipart/form-data" autocomplete="off" class="none">
  <input type="file" name="file" id="upload_file" />
</form>
<script type="text/javascript" src="/static/web/plugins/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="/static/web/script/common.js"></script>
<script type="text/javascript" src="/static/web/plugins/weui.min.js"></script>
<script type="text/javascript" src="/static/web/plugins/Swiper/swiper.js"></script>
<script type="text/javascript" src="/static/web/plugins/jquery.form.js"></script>
<script type="text/javascript" src="/static/web/plugins/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/static/web/plugins/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/static/web/plugins/jquery.validation/1.14.0/config.js"></script>
<script type="text/javascript" src="/static/web/plugins/jquery.form.js"></script>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
	pagination: '.swiper-pagination',
});   

$("#form").validate({
  submitHandler: function() {
    var loading = weui.loading('加载中');
    $("#form").ajaxSubmit({
      success: function(res) {
        loading.hide();
        if (res.code == 400) {
        	weui.topTips(res.message);
        	return false;
        } else if (res.code == 200) {
        	closeMask();
        	weui.alert('放入成功~', function() {
            window.location.reload();
          });
        } else if (res.code == 401) {
        	closeMask();
          weui.alert('登录失效，请刷新页面重新登录', function() {
            window.location.reload();
          });
        }
      }
    })
  }
});

/* 上传图片 start */
$('.weui-uploader__input').click(function() {
	$('#upload_file').click();
})

$('#upload_file').change(function(event) {
  var loading = weui.loading();
  $("#upload_form").ajaxSubmit(function(res) {
    loading.hide();
    if (res.code == 200) {
    	var str = '';
    	str += '<li class="weui-uploader__file" style="background-image: url(' + res.data + ');"></li>';
    	str += '<input type="hidden" name="images[]" value="' + res.data + '" />';
      $('.weui-uploader__files').append(str);
    } else if (res.code == 400) {
      weui.toast(res.message);
    } else {
      weui.toast('上传失败');
    }
  });
})
/* 上传图片 end */

function takeScrip() {
	var loading = weui.loading('加载中');
	var sex = $('#take_scrip_sex').val();
	$.ajax({
		url: '/api/shop/take_scrip',
		method: 'post',
		data: {
			sex: sex
		},
		success: function(res) {
			loading.hide();
			closeMask();
			if (res.code == 200) {
        weui.alert('抽取成功，快去看看吧！', function() {
          window.location.href = '/shop/my_scrip?act=take';
        });
      } else if (res.code == 400) {
        if (res.message == '金币不足') {
          weui.alert(res.message, function() {
            showGold();
          });
        } else {
          weui.alert(res.message);
        }
      } else if (res.code == 401) {
        weui.alert('登录失效，请刷新页面重新登录', function() {
          window.location.reload();
        });
      }
		}
	})
}

function goldPay(gold) {
	$.ajax({
		url: '/api/payment/goldPay',
		method: 'post',
		data: {
			gold: gold
		},
		success: function(res) {
			onBridgeReady(res.data);
		}
	})
}

function onBridgeReady(data) {
	WeixinJSBridge.invoke('getBrandWCPayRequest', {
    appId: data.appId,
    timeStamp: data.timeStamp,
    nonceStr: data.nonceStr,
    package: data.package,
    signType: data.signType,
    paySign: data.paySign
	}, function (res) {
		closeMask();
    if (res.err_msg == "get_brand_wcpay_request:ok") {
      // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      weui.alert('购买成功', function() {
        window.location.reload();
      });
    }
	});
}

</script>
</body>
</html>
